<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="inc :: header('登录界面')" />
</head>
<body style="background-color: #D0D0D0">
    <div class="layui-layout layui-layout-admin">
        <!--头部start-->
        <div class="layui-header">
                <div  style="width: 75%;margin: 0px auto;min-width:400px;">
                    <a href="#">
                        <img src="img/logo.jpg" style="margin: 5px"/>
                        <!--住房租赁公共信息管理系统-->
                    </a>
                </div>
        </div>
        <div  style="width: 70%;height: 350px;min-width:400px;background-color: #fff;margin: 20px auto;padding: 50px">
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <label class="layui-form-label">登录账号</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="account" type="text">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            使用登录账号、手机号码或电子邮箱中的任意一个均可(若采用手机或邮箱，请确保你的账号已经绑定手机号码或邮箱)
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="password" type="password">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline">
                            <input class="layui-input" name="code" type="text">
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <img onclick="codeImgClick()" title="点击更新验证码" src="/getCodeImg" id="codeImg" style="width: 98px;height: 34px;padding-top: -10px;cursor:pointer">
                        </div>
                    </div>
                    <div class="layui-form-item btn">
                        <a class="layui-btn-lg layui-btn" data-type="toLogin">立即登录</a>
                        &nbsp;
                        <a class="btn-link">忘记密码?</a>
                    </div>
                    <hr>
                    <span id="tip" style="color: red">

                    </span>
                </form>
        </div>
    </div>

    <script>
        layui.use('form',function () {
            $('.btn a').on('click',function() {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            var active = {
                'toLogin':function () {
                    var f = $('.layui-form');
                    var data = f.serialize();
                    $.post('/uc/toLogin',data,function (data) {

                        if(data.is){
                            //页面的重定向
                            window.location.href = '/index';
                        }else{
                            layer.msg(data.msg);
                            $("#tip").html(data.msg);
                            codeImgClick();//刷新验证码
                        }
                    },'json');
                }
            }

        });
        function codeImgClick(){
            $('#codeImg')[0].src = '/getCodeImg?'+new Date().getTime().toString();
        }
    </script>
</body>
</html>